<script setup lang="ts">
import { complexData, treeNodeIconsData } from './demo-data';
import { ref } from 'vue';

/** 是否支持选择节点，默认为false */
const selectable = ref(true);

/** 是否自动选择子节点，默认为true */
const autoCheckChildren = ref(false);

/** 返回值是否只优先展示父节点, 默认为false */
const cascade = ref(false);

/** 是否显示展示图标，默认为false */
const showTreeNodeIcons = ref(false);

/** 是否显示展示线，默认为false */
const showLines = ref(true);

/** 返回值 */
function outputValue(value: any) {
    console.log(value);
}
</script>

<template>
    <h5>修改勾选、自动勾选子节点、返回值规则</h5>
    <div class="custom-control custom-checkbox custom-control-inline">
        <input type="checkbox" v-model="selectable" class="custom-control-input" id="selectable" />
        <label class="custom-control-label" for="selectable">selectable: 可勾选</label>
    </div>
    <div class="custom-control custom-checkbox custom-control-inline">
        <input type="checkbox" v-model="autoCheckChildren" class="custom-control-input" id="autoCheckChildren" />
        <label class="custom-control-label" for="autoCheckChildren">autoCheckChildren: 选择父节点自动勾选子节点</label>
    </div>
    <div class="custom-control custom-checkbox custom-control-inline">
        <input type="checkbox" v-model="cascade" class="custom-control-input" id="cascade" />
        <label class="custom-control-label" for="cascade">cascade： 返回值优先展示父节点</label>
    </div>
    <div class="custom-control custom-checkbox custom-control-inline">
        <input type="checkbox" v-model="showTreeNodeIcons" class="custom-control-input" id="showTreeNodeIcons" />
        <label class="custom-control-label" for="showTreeNodeIcons">showTreeNodeIcons: 显示图标集</label>
    </div>
    <div class="custom-control custom-checkbox custom-control-inline">
        <input type="checkbox" v-model="showLines" class="custom-control-input" id="showLines" />
        <label class="custom-control-label" for="showLines">showLines: 显示展示线</label>
    </div>
    <div class="fv-tree-view-demo" style="width: 400px">
        <f-tree-view
            :data="complexData"
            :tree-node-icons-data="treeNodeIconsData"
            :selectable="selectable"
            :auto-check-children="autoCheckChildren"
            :cascade="cascade"
            :show-lines="showLines"
            :show-tree-node-icons="showTreeNodeIcons"
            @output-value="outputValue"
        ></f-tree-view>
    </div>
</template>
<style></style>
